<template>
	<view class="box" style="background-image: url('http://8.146.208.139:3000/avator/1710060062795.png');">
	<!-- <view class="box" style="background-image: url('http://8.146.208.139:3000/avator/1710055181306.png');"> -->
		<h1 class="title">{{title}}</h1>
		<view class="poster">
			<view class="avatar cu-avatar radius" :style="'background-image: url(' + avatar + ');'"></view>
			<view class='nickname'>{{nickname}}</view>
		</view>
		<view class='form'>
			<text class="t">
				地点：
			</text>{{place}}
		</view>
		<view class='form'>
			<text class="t">
				活动类型：
			</text>{{tag}}
		</view>
		<view class="form">
			<text class="t">
				开始时间：
			</text>
			{{beginTime}}
		</view>
		<view class="form">
			<text class="t">
				结束时间：
			</text>
			{{endTime}}
		</view>
		<view class="t">
			共同搭子：
		</view>
		<view class="action" style="margin-top: 3vh;" @click="this.showmodal=true">
			<view class="cu-avatar-group" v-for="(item,index) in matchList" :key="index">
				<view class="cu-avatar round lg"
					:style="'background-image: url(' + item.avatar + ');'">
				</view>
			</view>
			<text class="text-grey text-sm">{{matchList.length}}人</text>
		</view>
		<view style="width: 100%;text-align: center;margin-top: 8vh;">
			<view class="cu-btn bg-green round lg" @click="cancel">退出队伍</view>
		</view>
		
		<view class="modalname" v-if="showmodal">
			<view class="cu-modal bottom-modal show">
				<view class="cu-dialog">
					<view class="cu-bar bg-white">
						<!-- <view class="action text-green">确定</view> -->
						<view class="action text-blue" @tap="hideModal">确定</view>
					</view>
					<view class="padding-xl">
						<view v-for="(item,index) in matchList" :key="index">
							<view class="card">
								<view style="display: flex;">
									<view class="avatar cu-avatar radius" :style="'background-image: url(' + item.avatar + ');'"></view>
									<view class="name">
										{{item.name}}
									</view>
								</view>
								<view class="cuIcon-commentfill chat" @click="gochat(item)" v-if="this.myid!=item.userid"></view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		showpost,
		matchPoster,
		deleatUser
	} from '@/store/api.js'
	export default {
		onLoad(value) {
			this.myid=uni.getStorageSync('userid')
			this.postId=value.id
			showpost(value.id).then(res => {
				console.log(res)
				this.title = res.data.title
				this.place = res.data.meetAddress
				this.avatar = res.data.posterAvatar
				this.nickname = res.data.posterUsername
				this.beginTime = res.data.beginTime.substring(0, 10) + '-' + res.data.beginTime.substring(12, 16)
				this.endTime = res.data.endTime.substring(0, 10) + '-' + res.data.beginTime.substring(12, 16)
				res.data.tags.forEach(item => {
					this.tag = item.name + ''
				})
			})
			matchPoster(value.id).then(res=>{
				console.log(res)
				res.data.data.matchedUsers.forEach(item=>{
					this.matchList.push({
						avatar:item.avatar,
						name:item.userName,
						userid:item.id
					})
				})
			})
		},
		data() {
			return {
				postId:'',
				myid:'',
				matchList:[],
				beginTime: '',
				endTime: '',
				title: '',
				nickname: '',
				avatar: '',
				place: '',
				tag: '',
				showmodal:false
			};
		},
		methods: {
			cancel(){
				console.log(this.postId)
				deleatUser(this.postId).then(res=>{
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
				})
			},
			hideModal(){
				this.showmodal=false
			},
			gochat(item){
			let ifConnect = uni.getStorageSync('AlreadyConnect')
			if (ifConnect) {
				uni.navigateTo({
					url: `/subpkg/chat_detail/chat_detail?name=${item.name}&src=${item.avatar}&userid=${item.userid}`
				})
			}
			else{
				uni.setStorageSync('detail',JSON.stringify({
					name:item.name,
					src:item.avatar,
					userid:item.userid
				}))
				uni.switchTab({
					url:'/pages/Chat/Chat'
				})
			}
			}
		}
	}
</script>

<style lang="less" scoped>
	.modalname{
		max-height: 40vh;
		overflow-y: auto;
	}
	.card{
		margin-bottom: 5vh;
		display: flex;
		height: 5vh;
		justify-content: space-between;
		.name{
			height: 5vh;
			line-height: 5vh;
			margin-left: 4vw;
		}
		.chat{
			height: 5vh;
			line-height: 5vh;
		}
	}
	.box {
		padding-left: 10vw;
		padding-right: 6vw;
		padding-top: 8vh;
		background-size: 100% auto;
		background-repeat: no-repeat;
		width: 100vw;
		height: 100vh;
		// height: 530px;
		border: 1px solid black;
		.poster {
			margin-top: 4vh;
			margin-bottom: 3vh;
			display: flex;

			.avatar {
				width: 10vw;
				height: 10vw;
			}

			.nickname {
				height: 10vw;
				line-height: 10vw;
				margin-left: 5vw;
			}
		}

		.title {
			width: 100%;
			text-align: center;
			margin-top: 4vh;
			font-weight: 700;
		}

		.t {
			font-weight: 700;
		}

		.form {
			margin-bottom: 2vh;
		}
	}
</style>